<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作内联样式</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
            border: 5px solid black;
            
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <br>
    <button id="btn01">点我一</button>
    <button id="btn02">点我二</button>
    
</body>
</html>
<script>
    /*
        点击按钮以后，修改box1的大小

    */

    // 获取box1
    var box1 = document.getElementById("box1");
    // 获取 btn01
    var btn01 = document.getElementById("btn01");
    btn01.onclick = function(){

        // 修改 box1 的宽度
        /*
            通过 JS 修改元素的样式：
                语法： 元素.style.样式名 = 样式值

            注意：如果 CSS 样式名中含有 -，
                    这总名称在 js 中是不合法的，如 background-color
                    需要将这种 样式名 修改为 驼峰命名法
                    去掉减号（-） ，然后将 - 后面的字母大写

                例如： border-top-width:...;
                    应写为： borderTopWitdh="...";

            我们通过 style 属性设置的样式都是内联样式，
                而内联样式有较高的优先级，所以通过 js 修改的样式往往会立即显示

            但是如果在样式中写了 ！important ⭐⭐  则此时样式会有最高优先级，
                即使通过 js 也不能覆盖此样式，此时将会导致 js 修改样式失效
                所以尽量不要为样式添加 ！important  ❗❗❗
        */

        box1.style.width= "100px";
        box1.style.height= "100px";
        box1.style.backgroundColor =  "red";

    };

    // 点击按钮 2 以后，读取元素的样式
    var btn02 = document.getElementById("btn02");
    btn02.onclick=function(){

        // 读取 box1 的样式
        /*
            语法： 元素.style.样式名

            通过 style 属性设置和读取的都是 内联样式，
                无法读取到样式表中的样式
        */
        alert(box1.style.width);
    };
</script>